<template>
  <f-modal
    height="400"
    v-model="model"
    title="弹窗1"
    width="480"
    @cancel="cancelEvent"
    @confirm="confirmEvent">
    <template #default>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>
      <div>111111</div>

      <f-time-range-picker status="error" />
      <f-popconfirm title="CCCCCCCCCCCCCCC?">
        <a href="#" class="ml10">CCCC</a>
      </f-popconfirm>
      <f-tooltip title="AAAAAAAAA?">
        <a href="#" class="ml10">AAAAAA</a>
      </f-tooltip>
    </template>
  </f-modal>
  <f-button @click="openModel1">弹窗1</f-button>
  <f-button @click="openModel2">弹窗2</f-button>
</template>
<script setup>
import { ref, h } from 'vue';
import { useTrendsComp } from '../../packages/index';

const model = ref(false);

// 弹框取消
const cancelEvent = () => {
  model.value = false;
};
// 弹框确定
const confirmEvent = () => {
  model.value = false;
};
const openModel1 = () => {
  model.value = true;
};

const openModel2 = () => {
  const { show } = useTrendsComp({
    type: 'modal',
    title: '弹窗2',
    width: 'S',
    component: () => h('div', {}, '我试试')
    // showButton: true,
    // showClose: true,
    // showMask: false,
    // maskClosable: true
  });
  show();
};
</script>
<style lang="scss" scoped></style>
